<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="./js/jquery.js"></script>
<!--    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
</head>
<body>
        <form id="loginForm">
            用户名: <input name="userName" id="userName"> <br>

            密码: <input name="password" id="password"> <br>

            <button id="toLogin">提交</button>
        </form>

        <br>
        <span id="loginError" hidden style="color: red">error</span>
<script>

    $(function() {
        $("#toLogin").click(function() {
            // console.log($('#userName').val())
            var data={"userName":$('#userName').val(),"password": $('#password').val()};
            $.ajax({
                //要用post方式
                type: "Post",
                //方法所在页面和方法名
                url: "login",
                contentType: "application/json; charset=utf-8",
                dataType: "json",   //非必要
                // data: $('#loginForm').serialize(),//name=Liu&password=123
                data: JSON.stringify(data),//name=Liu&password=123
            success: function(data) {
                //返回的数据用data.d获取内容
                if (data.flag){
                    window.location.href="http://localhost:8080/main.html"
                }else {
                    $('#loginError').removeAttr("hidden")
                    $('#loginError').html(data.message)
                }
            },
            error: function(err) {
                console.log(err);
            }
        });

            //禁用按钮的提交
            return false;
        });
    });


</script>
</body>
</html>